frappe.pages['gantt2'].on_page_load = function (wrapper) {
	var page = frappe.ui.make_app_page({
		parent: wrapper,
		title: '甘特图',
		single_column: true
	});
	wrapper.gantt2_controller = new frappestudy.gantt2_controller(wrapper, page);
}

if (!window.frappestudy) { window.frappestudy = {} };
frappestudy.gantt2_controller = class gantt2_controller {
	constructor(wrapper, page) {
		this.page_id = wrapper.id;
		this.page = page;
		this.init_dom();
		this.renderGantt();
	}

	init_dom() {
		$("<div class='gantt'></div>").appendTo(this.page.main);
		this.page.add_inner_button('刷新', () => this.load_data());
	}

	load_data() {
		console.log('loading...');
	}

	data = [
		{
			name: "task1",
			desc: "",
			values: [{
				from: "/Date(1320192000000)/", //这里需要的时间为毫秒
				//。计算方式为时间变量减去时间初始值（1970-1-1）的差值换算为毫秒
				to: "/Date(1320592000000)/",
				label: "这是label",
				customClass: "ganttRed" //这里是这条记录的在甘特图上的颜色
			}]
		}, {
			name: "task2",
			desc: "这是描述",
			values: [{
				from: "/Date(1322611200000)/",
				to: "/Date(1323302400000)/",
				label: "",
				customClass: "ganttGreen"
			}]
		}]

	renderGantt() {
		//初始化gantt
		$("#" + this.page_id + " .gantt").gantt({
			source: this.data,
			//navigate: 'scroll',//// 底部使用拖拽的刻度尺还是按钮：scroll和buttons
			scale: "days",// 这里是设置默认比例。这里总共有四个参数：months  weeks days  hours.
			maxScale: "months", // 这里是设置最大比例。这里总共有四个参数：months  weeks days  hours.
			minScale: "days", // 这里是设置最小比例。这里总共有四个参数：months  weeks days  hours.
			itemsPerPage: 20, //设置甘特图每页显示多少条
			onItemClick: function (data) {//有数据范围内的点击事件
				// alert("Item clicked - show some details");
			},
			onAddClick: function (dt, rowId) {//无数据范围内的点击事件
				// alert("Empty space clicked - add an item!");
			},
			onRender: function () {//渲染事件
				if (window.console && typeof console.log === "function") {
					// console.log("chart rendered");
				}
			}
		});
	}
}